<template>
  <!-- 导航栏 -->
  <div class="topbar">
    <div class="nav">
      <ul>
        <li v-if="!loginX">
          <el-button type="text" @click="login">登录</el-button>
          <span class="sep">|</span>
          <el-button type="text" @click="register = true">注册</el-button>
        </li>
        <li v-else>
          欢迎
          <el-popover placement="top" width="180" v-model="visible">
            <p>确定退出登录吗？</p>
            <div style="text-align: right; margin: 10px 0 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" size="mini">确定</el-button>
            </div>
            <el-button type="text">{{yj}}</el-button>
          </el-popover>
        </li>
        <li>
          <router-link to="/order">我的订单</router-link>
        </li>
        <li>
          <router-link to="/collect">我的收藏</router-link>
        </li>
        <li class="shopCart">
          <router-link to="/shoppingCart">
            <i class="el-icon-shopping-cart-full"></i> 购物车
            <span class="num">({{99}})</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "TopBar",
    data() {
      return {
        loginX: false,
        showLogin: false
      };
    },
    created() {

    },
    methods: {
      login() {
        this.showLogin = true;
      }
    }
  };
</script>

<style scoped>
  /* 顶部导航栏CSS */
  .topbar {
    height: 40px;
    background-color: #3d3d3d;
    margin-bottom: 20px;
  }

  .topbar .nav {
    width: 1225px;
    margin: 0 auto;
    background-color: red;
  }

  .topbar .nav ul {
    float: right;
  }

  .topbar .nav li {
    float: left;
    height: 40px;
    color: #b0b0b0;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    margin-left: 20px;
  }

  .topbar .nav .sep {
    color: #b0b0b0;
    font-size: 12px;
    margin: 0 5px;
  }

  .topbar .nav li .el-button {
    color: #b0b0b0;
  }

  .topbar .nav .el-button:hover {
    color: #fff;
  }

  .topbar .nav li a {
    color: #b0b0b0;
  }

  .topbar .nav a:hover {
    color: #fff;
  }

  .topbar .nav .shopCart {
    width: 120px;
    background: #424242;
  }

  .topbar .nav .shopCart:hover {
    background: #fff;
  }

  .topbar .nav .shopCart:hover a {
    color: #ff6700;
  }

  .topbar .nav .shopCart-full {
    width: 120px;
    background: #ff6700;
  }

  .topbar .nav .shopCart-full a {
    color: white;
  }

  /* 顶部导航栏CSS END */

</style>
